<script lang="ts" setup>
import type { GeneratePayFineRes, OverdueListRes } from '@/types/api/order'
import type { Ref } from 'vue'
import { orderApi } from '@/request/api'
import { useAppConfig } from '@/stores'
import { useHideLoading, useLoading, useRouteGuard } from '@/utils'
import { useAliPay } from '@/utils/pay'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { isNil } from 'lodash-es'
import { reactive, ref } from 'vue'
import { object as zobject, string as zstring } from 'zod'

const appConfig = useAppConfig()
const oid = ref() as Ref<number>
const data = ref() as Ref<GeneratePayFineRes>
const dataList = ref<OverdueListRes['data']>([])
const load = reactive({
  pageSize: 20,
  pageNum: 1,
  once: false,
  more: false,
})
const listSize = ref(0)

onLoad(async (query) => {
  const zparse = zobject({
    oid: zstring().regex(/^\d+$/).transform(Number),
  }).safeParse(query)
  if (!zparse.success) {
    return await useRouteGuard()
  }
  oid.value = zparse.data.oid

  // uni.startPullDownRefresh()
  useLoading(true)
  await getData()
  await getList()
  useHideLoading()
})

onPullDownRefresh(async () => {
  await Promise.all([
    getData(),
    getList(),
  ])
  uni.stopPullDownRefresh()
})

async function getData() {
  const [err, res] = await to(orderApi.generatePayFine({ oid: oid.value }))
  if (err) {
    return
  }

  data.value = res
}

async function getList() {
  const [err, res] = await to(orderApi.overdueList({
    oid: oid.value,
    pageNo: load.pageNum,
    pageSize: load.pageSize,
  }))
  if (err) {
    return
  }

  dataList.value = res.data
  listSize.value = res.totalCount
}

async function handlePay() {
  useLoading(true)
  const [apiErr, apiRes] = await to(orderApi.newTradePay({
    objId: data.value.id,
    subject: '违约金',
    totalAmount: data.value.overdueFine,
    type: 2,
  }))
  useHideLoading()
  if (apiErr) {
    return
  }

  // #ifdef MP-ALIPAY
  await to(useAliPay({ tradeNO: apiRes.trade_no }))
  // #endif

  await Promise.all([
    getData(),
    getList(),
  ])
}
</script>

<template>
  <view v-if="!isNil(data)" class="px-30px pt-20px safe-pb-20px">
    <view class="rd-16px bg-white">
      <!--  -->
      <view class="px-10px pt-10px">
        <view class="flex rd-full bg-#F4F5F9 px-20px text-24px">
          <view class="text-#3 lh-50px">订单编号: {{ data.orderCode }}</view>
        </view>
      </view>
      <!--  -->
      <view class="pb-50px pt-60px text-center text-36px text-#3">待支付违约金 ￥{{ data.overdueFine }}</view>
      <!--  -->
      <view class="flex items-center justify-between px-22px pb-20px">
        <template v-if="data.overdueFine !== 0">
          <!--  -->
          <view class="flex flex-col items-start">
            <view class="relative pb-5px">
              <view class="flex-start flex b-2px b-#e4 rd-full b-solid">
                <view class="h-30px w-30px flex">
                  <view class="i-ri:error-warning-line text-theme-primary m-a text-18px"></view>
                </view>
                <view class="text-theme-primary py-6px pr-10px text-18px">按时还款有助于提高信用额度</view>
              </view>
              <view class="absolute bottom-0 left-35px h-10px w-10px rotate-45deg b-2px b-#e4 b-solid b-l-none b-t-none bg-white"></view>
            </view>
            <view class="mt-5px flex text-24px">
              <view class="text-#6a">逾期日期：</view>
              <view class="text-#3">{{ data.overdueDay }}</view>
            </view>
          </view>
          <!--  -->
          <view class="flex">
            <view v-if="!appConfig.hidePayBtn" class="btn-primary-black w-160px text-26px lh-60px" @click="handlePay">点击缴纳</view>
          </view>
        </template>
        <template v-else>
          <view class="flex text-24px">
            <view class="text-#6a">逾期日期：</view>
            <view class="text-#3">{{ data.overdueDay }}</view>
          </view>
          <view class="flex items-center">
            <view class="i-ri:checkbox-circle-fill text-30px text-#60CC84"></view>
            <view class="ml-5px text-24px text-#6">已缴纳</view>
          </view>
        </template>
      </view>
    </view>

    <view class="py-20px text-24px">违约金(共{{ listSize }}条记录)</view>

    <!-- TODO 列表 -->
  </view>
</template>

<style lang="less" scoped></style>
